<%@ page import="com.exp.practice.workbench.domain.Student" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() +
            "://"
            + request.getServerName() + ":"
            + request.getServerPort()
            + request.getContextPath() + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
    <link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />

    <script type="text/javascript" src="jquery/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>

    <link rel="stylesheet" type="text/css" href="jquery/bs_pagination/jquery.bs_pagination.min.css">
    <script type="text/javascript" src="jquery/bs_pagination/jquery.bs_pagination.min.js"></script>
    <script type="text/javascript" src="jquery/bs_pagination/en.js"></script>


    <script type="text/javascript">
        $(function () {
            let historyFlag = false
            let url = "workbench/student/exercise/pageList.do"
            pageList(1, 4, !historyFlag);
            function doExercise(qid) {
                window.location.href='workbench/student/exercise/redo.do?qid='+ qid + '/'
            }

            $("#beginBtn").click(function () {
                let type = $("#type").val();
                let count = $("#count").val();
                window.location.href='workbench/student/exercise/beginExercise.do?type='+ type +'&count=' + count + '/'
            })

            $("#historyBtn").click(function () {
                if (!historyFlag) {
                    $("#historyBtn").text("查看错题")
                    $(".page-header h3").text("我的答题记录")
                } else {
                    $("#historyBtn").text("查看历史答题")
                    $(".page-header h3").text("我的错题")
                }
                pageList(1, 4, historyFlag)
                historyFlag = !historyFlag
            })

            function pageList(pageNo, pageSize, historyFlag) {
                $.ajax({
                    url: "workbench/student/exercise/pageList.do",
                    data: {
                        "pageNo": pageNo,
                        "pageSize": pageSize,
                        "history": historyFlag,
                        "stuId": $("#userId").text()
                    },
                    dataType: "json",
                    type: "get",
                    success:function (data){
                        $("#questionBody").html("");
                        $.each(data.dataList,function (i, item){
                            let tr = $("<tr></tr>");
                            let qid = $("<td></td>").html(item.question.qid)
                            let head = $("<td></td>").html(item.question.head)
                            let type = $("<td></td>").html(item.question.type)
                            let myAnswer = $("<td></td>").html(item.stuAnswer)
                            let a = $("<a style='text-decoration: none; cursor: pointer;'>练习</a>")
                            let option = $("<td></td>").html(a)
                            a.click(function () {
                                doExercise(item.question.qid)
                            })
                            tr.append(qid)
                            tr.append(head)
                            tr.append(type)
                            tr.append(myAnswer)
                            tr.append(option)
                            $("#questionBody").append(tr)
                        })
                        let totalPages=Math.ceil(data.total/pageSize);
                        $("#questionPage").bs_pagination({
                            currentPage: pageNo, // 页码
                            rowsPerPage: pageSize, // 每页显示的记录条数
                            maxRowsPerPage: 20, // 每页最多显示的记录条数
                            totalPages: totalPages, // 总页数
                            totalRows: data.total, // 总记录条数

                            visiblePageLinks: 5, // 显示几个卡片

                            showGoToPage: true,
                            showRowsPerPage: true,
                            showRowsInfo: true,
                            showRowsDefaultInfo: true,

                            onChangePage : function(event, data){
                                pageList(data.currentPage , data.rowsPerPage, historyFlag);
                            }
                        });
                    }
                })
            }
        })
    </script>
</head>
<body>
    <div>
        <div style="position: relative; left: 10px; top: -10px;">
            <div class="page-header">
                <h3>我的错题</h3>
            </div>
        </div>
    </div>

    <span id="userId" style="display: none;" >${user.stuId}</span>
    <form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">

        <div class="form-group col-sm-2">
            <label for="type">题目类型</label>
            <div style="display: inline-block; vertical-align: center;">
                <select id="type" class="form-control">
                    <option value="加法">加法</option>
                    <option value="减法">减法</option>
                    <option value="乘法">乘法</option>
                    <option value="除法">除法</option>
                    <option value="英语题">英语题</option>
                    <option value="应用题">应用题</option>
                </select>
            </div>
        </div>

        <div class="form-group col-sm-6">
            <label for="type">题目数量</label>
            <div style="display: inline-block; vertical-align: center;">
                <select id="count" class="form-control">
                    <option value="3">3</option>
                    <option value="5">5</option>
                    <option value="8">8</option>
                </select>
            </div>
        </div>

        <div class="col-sm-4">
            <button id="beginBtn" type="button" class="btn btn-default">开始练习</button>

            <button id="historyBtn" type="button" class="btn btn-default">查看历史答题</button>
        </div>

    </form>
    <div style="position: relative;top: 40px;">
        <table class="table table-hover">
            <thead>
            <tr style="color: #B3B3B3;">
                <td>题目编号</td>
                <td>题目描述</td>
                <td>题目类型</td>
                <td>我的答案</td>
                <td>操作</td>
            </tr>
            </thead>
            <tbody id="questionBody">

            </tbody>
        </table>
    </div>
    <div style="height: 50px; position: relative;top: 30px;">

        <div id="questionPage"></div>

    </div>
</body>
</html>